<template>
  <div>
    <div class="main-content">
      <div class="page-title">历史记录</div>

      <!-- 历史记录统计 -->
      <div class="history-stats">
        <div class="stat-card">
          <div class="stat-title">总发布量</div>
          <div class="stat-value">{{ totalPosts }}</div>
        </div>

        <div class="stat-card">
          <div class="stat-title">本月发布</div>
          <div class="stat-value">{{ thisMonthPosts }}</div>
        </div>

        <div class="stat-card">
          <div class="stat-title">平均点赞</div>
          <div class="stat-value">{{ formatNumber(averageLikes) }}</div>
        </div>

        <div class="stat-card">
          <div class="stat-title">平均收藏</div>
          <div class="stat-value">{{ formatNumber(averageCollects) }}</div>
        </div>
      </div>

      <!-- 历史记录 -->
      <div class="history-container">
        <div class="history-header">
          <div class="history-title">我的发布历史</div>
          <div class="history-actions">
            <el-button type="primary" size="small" @click="createNewPost">
              <i class="fa-solid fa-plus"></i> 发布新内容
            </el-button>
            <el-button type="text" size="small" @click="batchSelect">
              <i class="fa-solid fa-check-square"></i> 批量选择
            </el-button>
            <el-button type="text" size="small" @click="exportData">
              <i class="fa-solid fa-download"></i> 导出数据
            </el-button>
          </div>
        </div>

        <div class="history-filter">
          <el-input v-model="searchKeyword" placeholder="搜索标题或内容" prefix-icon="el-icon-search" size="small"
            style="width: 300px;" @keyup.enter="searchHistory"></el-input>

          <el-button type="text" size="small" @click="searchHistory">搜索</el-button>

          <el-select v-model="categoryFilter" placeholder="选择分类" size="small">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="category in categories" :key="category.id" :label="category.name"
              :value="category.id"></el-option>
          </el-select>

          <el-select v-model="statusFilter" placeholder="选择状态" size="small">
            <el-option label="全部" value=""></el-option>
            <el-option label="已发布" value="published"></el-option>
            <el-option label="已删除" value="deleted"></el-option>
            <el-option label="已隐藏" value="hidden"></el-option>
          </el-select>

          <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" size="small"></el-date-picker>

          <el-button type="text" size="small" @click="resetFilters">重置</el-button>
        </div>

        <!-- 历史记录选项卡 -->
        <div class="history-tabs">
          <el-tabs v-model="activeTab" @tab-click="handleTabClick">
            <el-tab-pane label="全部" name="all"></el-tab-pane>
            <el-tab-pane label="近7天" name="7d"></el-tab-pane>
            <el-tab-pane label="近30天" name="30d"></el-tab-pane>
            <el-tab-pane label="近90天" name="90d"></el-tab-pane>
            <el-tab-pane label="今年" name="thisYear"></el-tab-pane>
          </el-tabs>
        </div>

        <!-- 历史记录列表 -->
        <div class="history-list">
          <!-- 修改前 -->
          <!-- <div v-for="(history, index) in filteredHistories" :key="history.id" class="history-card"> -->
          <!-- 修改后 -->
          <div v-for="history in filteredHistories" :key="history.id" class="history-card">
            <el-checkbox v-model="batchSelectMode" :checked="selectedHistories.includes(history.id)"
              @change="handleSelectHistory(history.id)" class="batch-checkbox"></el-checkbox>

            <div class="history-cover">
              <img :src="history.coverImage" alt="历史内容封面">
              <div :class="['status-badge', getStatusClass(history.status)]">{{ getStatusText(history.status) }}</div>
            </div>

            <div class="history-info">
              <div class="history-title">{{ history.title }}</div>

              <div class="history-meta">
                <div>{{ formatDate(history.publishedAt) }}</div>
                <div>{{ history.categoryName }}</div>
              </div>

              <div class="history-stats">
                <div class="stat-item">
                  <i class="fa-solid fa-heart stat-icon"></i>
                  <span>{{ formatNumber(history.likes) }}</span>
                </div>
                <!-- 原文件此处内容截断，保留截断提示 -->
                <!-- ...(16250 characters truncated) -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PublishHistory',
  data() {
    return {
      activeMenu: 'publish-history',
      searchKeyword: '',
      categoryFilter: '',
      statusFilter: '',
      dateRange: [],
      activeTab: 'all',
      batchSelectMode: false,
      selectedHistories: [],
      totalPosts: 0,
      thisMonthPosts: 0,
      averageLikes: 0,
      averageCollects: 0,
      categories: [
        // 这里应根据实际情况填充分类数据
      ],
      histories: [
        // 这里应根据实际情况填充历史记录数据
      ]
    };
  },
  computed: {
    filteredHistories() {
      let filtered = this.histories;

      if (this.searchKeyword) {
        filtered = filtered.filter(history =>
          history.title.includes(this.searchKeyword) || history.content.includes(this.searchKeyword)
        );
      }

      if (this.categoryFilter) {
        filtered = filtered.filter(history => history.categoryId === this.categoryFilter);
      }

      if (this.statusFilter) {
        filtered = filtered.filter(history => history.status === this.statusFilter);
      }

      if (this.dateRange.length === 2) {
        const [start, end] = this.dateRange;
        filtered = filtered.filter(history => {
          const publishedAt = new Date(history.publishedAt);
          return publishedAt >= start && publishedAt <= end;
        });
      }

      return filtered;
    }
  },
  methods: {
    handleOpen() {
      // 处理侧边栏菜单展开事件
    },
    handleClose() {
      // 处理侧边栏菜单关闭事件
    },
    createNewPost() {
      // 发布新内容逻辑
    },
    batchSelect() {
      // 批量选择逻辑
    },
    exportData() {
      // 导出数据逻辑
    },
    searchHistory() {
      // 搜索历史记录逻辑
    },
    resetFilters() {
      this.searchKeyword = '';
      this.categoryFilter = '';
      this.statusFilter = '';
      this.dateRange = [];
      this.activeTab = 'all';
    },
    handleTabClick() {
      // 处理选项卡点击事件
    },
    handleSelectHistory(historyId) {
      if (this.selectedHistories.includes(historyId)) {
        this.selectedHistories = this.selectedHistories.filter(id => id !== historyId);
      } else {
        this.selectedHistories.push(historyId);
      }
    },
    getStatusClass(status) {
      switch (status) {
        case 'published':
          return 'status-published';
        case 'deleted':
          return 'status-deleted';
        case 'hidden':
          return 'status-hidden';
        default:
          return '';
      }
    },
    getStatusText(status) {
      switch (status) {
        case 'published':
          return '已发布';
        case 'deleted':
          return '已删除';
        case 'hidden':
          return '已隐藏';
        default:
          return '';
      }
    },
    formatDate(date) {
      // 日期格式化逻辑
      return new Date(date).toLocaleDateString();
    },
    formatNumber(number) {
      // 数字格式化逻辑
      return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }
  },
  mounted() {
    // 组件挂载后获取数据
    // this.fetchHistories();
    // this.fetchStats();
  }
};
</script>

<style scoped lang="scss">
/* 主内容区域 */

.page-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

/* 历史记录相关样式 */
.history-container {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.history-actions {
  display: flex;
  gap: 10px;
}

.history-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.history-tabs {
  margin-bottom: 20px;
}

.history-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.history-card {
  border: 1px solid #EBEEF5;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.history-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.history-cover {
  height: 200px;
  background-color: #F5F7FA;
  position: relative;
}

.history-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.history-cover .status-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: var(--primary-color);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.history-info {
  padding: 16px;
}

.history-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  line-height: 1.4;
  max-height: 2.8em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.history-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--gray-color);
  font-size: 12px;
  margin-bottom: 12px;
}

.history-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.stat-card {
  /* 原有样式保留 */
  width: 24%;
  background-color: white;
  border-radius: 10px;
  padding: 50px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bolder;
  transition: all 0.3s ease; /* 添加过渡动画 */
  position: relative; /* 确保动画层级 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.07);
}
.stat-value{
  margin-left: 10px;
}
.stat-card:hover {
  transform: translateY(-10px); /* 上移10px */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* 增强投影 */
}


.stat-card:hover::after {
  width: 60%; /* 鼠标移入时显示线条 */
  left: 20%; /* 调整线条位置 */
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.stat-icon {
  color: var(--gray-color);
}

.history-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 内容详情弹窗 */
.content-detail-dialog .el-dialog__header {
  border-bottom: 1px solid #EBEEF5;
}

.content-detail-dialog .el-dialog__title {
  font-size: 18px;
  font-weight: 500;
}

.content-detail-header {
  margin-bottom: 20px;
}

.content-detail-cover {
  width: 100%;
  height: 300px;
  margin-bottom: 20px;
}

.content-detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.content-detail-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 10px;
}

.content-detail-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--gray-color);
  margin-bottom: 20px;
}

.content-detail-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.content-detail-stats .stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.content-detail-content {
  line-height: 1.8;
  margin-bottom: 20px;
}

.content-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.content-detail-tag {
  background-color: #F5F7FA;
  color: var(--gray-color);
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 14px;
}

.content-detail-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.content-detail-chart {
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.content-detail-chart-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
}

.content-detail-chart-container {
  height: 200px;
}

/* 分页样式 */
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

</style>
